<template>
  <div class="seller-container">
    <div class="seller" ref="seller_ref"></div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      chartInstance: null,
      sellerData: [],
      currentpage: 1,
      totalPage: null,
      pagesize: 5,
      timer: null
    };
  },
  created(){
    this.$instance.registerCallback('sellerData',this.getData)
  },
  
  mounted() {
    this.initEchart();
    // this.getData();
    window.addEventListener('resize',this.screenAdapter)
    this.screenAdapter()
    this.$instance.send({
      action:'getData',
      socketType:'sellerData',
      chartName:'seller',
      value:true
    })
  },
  destoryed() {

    clearInterval(this.timer);
    this.timer = null;
    window.removeEventListener('resize',this.screenAdapter)
    this.$instance.unregisterCallback('sellerData')
  },
  methods: {
    initEchart() {
      this.chartInstance = this.$echarts.init(this.$refs.seller_ref);
      const option = {
           title: {
          text: "商家销售统计",
          textStyle: {
            color: "green",
            // fontSize: 30,
          },
          left: 20,
          top: 15,
        },
        grid: {
            top:'13%',
            left:'10%',
            right:'10%',
            bottom:'5%',
          containLabel: true,
        },
        xAxis: {
          type: "value",
          name:'xz',
          nameTextStyle: {
      color: "rgba(129, 194, 44, 1)",
    
      fontSize:20
    }
        },
        yAxis: {
          type: "category",
           
        },
        tooltip:{
            trigger:'axis',
            axisPointer:{
                type:'line',
                z:0,
                lineStyle:{
                    type:'solid',
                    // width:50,
                    color:'#2D3443'
                }
            }
        },
        series: [
          {
            type: "bar",
            // barWidth: 50,
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "red",
                fontSize: 16,
              },
            },
            itemStyle: {
            //   barBorderRadius: [0, 25, 25, 0],
            //   color: {
            //     type: "linear",
            //     x: 0,
            //     y: 0,
            //     x2: 1,
            //     y2: 0,
            //     colorStops: [
            //       {
            //         offset: 0,
            //         color: "#5052EE", // 0% 处的颜色
            //       },
            //       {
            //         offset: 1,
            //         color: "#  AB6EE5", // 100% 处的颜色
            //       },
            //     ],
            //     global: false, // 缺省为 false
            //   },
                color:new this.$echarts.graphic.LinearGradient(0,0,1,0,[
                    {offset:0,color:'#5052EE'},
                    {offset:1,color:'#AB6EE5'}
                ])
            },
          },
        ],
      }
      this.chartInstance.setOption(option)
      this.chartInstance.on("mouseover", this.clearIntervalBar);
      this.chartInstance.on("mouseout", this.setIntervalBar);
    },
    getData(data) {
      console.log(this);
      // const { data: ret } = await this.$https("/api/seller");
      // this.sellerData = ret.sort((a, b) => {
      //   return a.value - b.value;
      // });
      // this.totalPage =ret.length % this.pagesize == 0? ret.length / this.pagesize: Math.ceil(ret.length / this.pagesize);
        
     
      this.sellerData = data.sort((a, b) => {
        return a.value - b.value;
      });
      this.totalPage =data.length % this.pagesize == 0? data.length / this.pagesize: Math.ceil(data.length / this.pagesize);
        
      this.updateEchart();
      this.setIntervalBar();

    },
    updateEchart() {
      const start = (this.currentpage - 1) * this.pagesize;
      const end = this.currentpage * this.pagesize;
      const showData = this.sellerData.slice(start, end);
      const sellername = showData.map((item) => {
        return item.name;
      });
      const sellerValues = showData.map((item) => {
        return item.value;
      });

      const dataOption = {  
          textStyle:{
              color:'blue',
              fontStyle:'oblique',
              fontSize:30
          },
        yAxis: {
          data: sellername,
        },
        series: [
          {
            data: sellerValues,
          }
        ],
      };
      this.chartInstance.setOption(dataOption);
    },
    setIntervalBar() {
      if (this.timer) clearInterval(this.timer);
      this.timer = setInterval(() => {
        this.currentpage++;
        if (this.currentpage > this.totalPage) {
          this.currentpage = 1;
        }
        this.updateEchart();
      }, 2000);
    },
    clearIntervalBar() {
      clearInterval(this.timer);
      this.timer = null;
    },
    screenAdapter(){
     
        const textFontSize = this.$refs.seller_ref.clientWidth/100*4;
        const textHeightSize = this.$refs.seller_ref.clientHeight/100;
        console.log(textHeightSize);
        const adapterOption =  {
           title: {
            textStyle: {   
            fontSize: textFontSize
          }
        },
        tooltip:{   
            axisPointer:{
                lineStyle:{
                    width:textFontSize,
                }
            }
        },
        series: [
          {
            barWidth: textFontSize,
            label:{
                textStyle:{
                    fontSize:textFontSize/4
                }
            },
            itemStyle: {
              borderRadius: [0, textFontSize/2, textFontSize/2, 0],
            }
          }
        ],
      }
        this.chartInstance.setOption(adapterOption)
        this.chartInstance.resize()
    }
  },
};
</script>

<style>
</style>